<template>
  <div>
    <cusDialog ref="dialog" width="400px" :title="title" headCss="float:left;" confrimText="新增"
      @hideHandler="hideHandler" @confrim="confrimHandler">
      <el-form ref="deviceFormRef" :rules="rules" :model="deviceForm" label-width="80px">

        <el-form-item label="设备ID" prop="machineCode">
          <el-input v-model.trim="deviceForm.machineCode" maxlength="30" clearable placeholder="请输入设备ID">
          </el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="deviceName">
          <el-input v-model.trim="deviceForm.deviceName" maxlength="30" clearable placeholder="请输入设备名称"></el-input>
        </el-form-item>
        <el-form-item label="所属组织" prop="unitCode">
          <el-tree-select v-model="deviceForm.unitCode" :data="treeData" check-strictly :default-expand-all="true"
            :render-after-expand="false" style="width: 100%" />
        </el-form-item>
      </el-form>
    </cusDialog>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import SingleUpload from "@/components/Upload/SingleUpload.vue";
import type { FormInstance, FormRules } from "element-plus";
import { reqUnitTree } from "@/api/business/units";
import { reqAddDevice } from "@/api/business/device";
const router = useRouter();

// 人员初始化数据
const formOrigin = () => ({
  machineCode: "", //人员姓名
  deviceName: "", // 账号
  unitCode: "", //所属组织
});

const deviceForm = ref(formOrigin());
const deviceFormRef = ref(null);
const title = ref("添加设备");
const rules = reactive<FormRules>({
  machineCode: { required: true, message: "此项必填", trigger: "blur" },
  deviceName: { required: true, message: "此项必填", trigger: "blur" },
  unitCode: { required: true, message: "此项必填", trigger: "blur" },
});

const emits = defineEmits(["onInit"]);

const dialog = ref(null);
// 展示对话框
const showHandler = (tit: string) => {
  title.value = tit;
  dialog.value.show = true;
  getUnitsList();
};
// 对话框关闭重置初始数据
const hideHandler = () => {
  deviceForm.value = formOrigin();
  deviceFormRef.value.resetFields();
};
const confrimHandler = () => {
  deviceFormRef.value.validate((valid, fields) => {
    if (valid) {
      getAddDevice();
    } else {
      console.log("error submit!", fields);
    }
  });
};

const getAddDevice = () => {
  console.log(deviceForm.value)
  reqAddDevice({
    ...deviceForm.value,
  }).then((res) => {
    if (res.code == 1) {
      emits("onInit");
      dialog.value.show = false;
      ElMessage.success("添加成功");
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const treeData = ref([]);
const getUnitsList = () => {
  reqUnitTree().then((res) => {
    if (res.code == 1) {
      treeData.value = [
        {
          ...res.data,
          label: res.data.unitName,
          value: res.data.unitCode,
        },
      ];
      if (res.data.children.length) {
        mapArrData(res.data.children);
      }
    }
  });
};

const mapArrData = (arr) => {
  arr.map((el) => {
    el.label = el.unitName;
    el.value = el.unitCode;
    if (el.children.length) mapArrData(el.children);
  });
};
defineExpose({ showHandler, deviceForm });
</script>

<style lang="scss" scoped>
.lableBox {
  //styleName: 中文简体R/H8;
  font-family: PingFang SC;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
</style>